@use "sass:math";
@use "sass:map";

@use "element-plus/theme-chalk/src/mixins/function" as *;

// types
$types: primary, success, warning, danger, error, info;

// Color
$colors: () !default;
$colors: map.deep-merge(
  (
    "white": #ffffff,
    "black": #000000,
    "primary": (
      "base": $nil-color-primary,
    ),
    "success": (
      "base": $nil-color-success,
    ),
    "warning": (
      "base": $nil-color-warning,
    ),
    "danger": (
      "base": $nil-color-danger,
    ),
    "error": (
      "base": $nil-color-error,
    ),
    "info": (
      "base": $nil-color-info,
    ),
  ),
  $colors
);

$color-white: map.get($colors, "white") !default;
$color-black: map.get($colors, "black") !default;
$color-primary: map.get($colors, "primary", "base") !default;
$color-success: map.get($colors, "success", "base") !default;
$color-warning: map.get($colors, "warning", "base") !default;
$color-danger: map.get($colors, "danger", "base") !default;
$color-error: map.get($colors, "error", "base") !default;
$color-info: map.get($colors, "info", "base") !default;

// https://sass-lang.com/documentation/values/maps#immutability
// mix color with white
@mixin set-color-type-light($type, $number) {
  $colors: map.deep-merge(
    (
      $type: (
        "light-#{$number}":
          mix(
            $color-white,
            map.get($colors, $type, "base"),
            math.percentage(math.div($number, 10))
          ),
      ),
    ),
    $colors
  ) !global;
}

// mix color with black
@mixin set-color-type-dark($type, $number) {
  $colors: map.deep-merge(
    (
      $type: (
        "dark-#{$number}":
          mix(
            $color-black,
            map.get($colors, $type, "base"),
            math.percentage(math.div($number, 10))
          ),
      ),
    ),
    $colors
  ) !global;
}

// $colors.primary.light-i
// --el-color-primary-light-i
// 10% 53a8ff
// 20% 66b1ff
// 30% 79bbff
// 40% 8cc5ff
// 50% a0cfff
// 60% b3d8ff
// 70% c6e2ff
// 80% d9ecff
// 90% ecf5ff
@for $i from 1 through 9 {
  @each $type in $types {
    @include set-color-type-light($type, $i);
  }
}
// --el-color-primary-dark-2
@each $type in $types {
  @include set-color-type-dark($type, 2);
}

@mixin set-css-color-type-light($type, $i) {
  #{getCssVarName('color', $type, 'light', $i)}: #{map.get(
      $colors,
      $type,
      "light-#{$i}"
    )};
}

@mixin set-css-color-type($type) {
  #{getCssVarName('color', $type)}: #{map.get($colors, $type, "base")};
  @each $i in (3, 5, 7, 8, 9) {
    @include set-css-color-type-light($type, $i);
  }
  #{getCssVarName('color', $type, 'dark-2')}: #{map.get(
      $colors,
      $type,
      "dark-2"
    )};
}

@mixin set-css-color-rgb($type) {
  $color: map.get($colors, $type, "base");
  #{getCssVarName('color', $type, 'rgb')}: #{red($color)}, #{green($color)},
    #{blue($color)};
}
